<div class="login-container">
  <div class="login-bg-decoration">
    <span>∣A∣</span>
    <span>Ax = b</span>
    <span>λ</span>
    <span>rank(A)</span>
    <span>det(A)</span>
    <span>tr(A)</span>
  </div>

  <!--登陆-->
  <div class="login-card" *ngIf="pageFunc == 'login'">
    <div class="login-header">
      <h1 class="main-title">线性代数基础</h1>
      <p class="sub-title">让线性代数不再晦涩 · 从基础到应用</p>
    </div>

    <form [formGroup]="loginForm" (ngSubmit)="onLogin()" class="login-form">
      <!-- 邮箱输入框 -->
      <div class="form-item">
        <label for="userEmail" class="form-label">邮箱</label>
        <div class="input-wrapper">
          <i class="anticon anticon-user"></i>
          <input
            type="text"
            id="userEmail"
            formControlName="userEmail"
            class="form-input"
            placeholder="请输入邮箱"
            [class.error]="loginUserEmailControl?.invalid && (loginUserEmailControl?.dirty || loginUserEmailControl?.touched)"
          />
        </div>
        <!-- 错误提示 -->
        <div class="error-message" *ngIf="loginUserEmailControl?.invalid && (loginUserEmailControl?.dirty || loginUserEmailControl?.touched)">
          <span *ngIf="loginUserEmailControl?.errors?.['required']">邮箱不能为空</span>
          <span *ngIf="loginUserEmailControl?.errors?.['pattern']">邮箱格式不合法（如 xxx@xxx.com）</span>
        </div>
      </div>

      <!-- 密码输入框 -->
      <div class="form-item">
        <label for="password" class="form-label">密码</label>
        <div class="input-wrapper">
          <i class="anticon anticon-lock"></i>
          <input
            type="{{ showPassword ? 'text' : 'password' }}"
            id="password"
            formControlName="password"
            class="form-input"
            placeholder="请输入密码"
            [class.error]="loginForm.get('password')?.invalid && (loginForm.get('password')?.dirty || loginForm.get('password')?.touched)"
          />
          <!-- 显示/隐藏密码切换 -->
          <i
            class="anticon toggle-password {{ showResetPasswordConfirmation ? 'anticon-eye' : 'anticon-eye-invisible' }}"
            (click)="showPassword = !showPassword"
          ></i>
        </div>
        <!-- 错误提示 -->
        <div *ngIf="loginForm.get('password')?.invalid && (loginForm.get('password')?.dirty || loginForm.get('password')?.touched)" class="error-message">
          密码不能为空
        </div>
      </div>

      <button
        type="submit"
        class="login-btn"
        [disabled]="loginForm.invalid || isLoading"
      >
        <span *ngIf="!isLoading">登录</span>
        <i *ngIf="isLoading" class="anticon anticon-loading loading-icon"></i>
      </button>

      <div class="form-footer">
        <a (click)="onRegisterSwitchClick()" class="link register-link">新用户？立即注册</a>
        <a (click)="onForgotPasswordClick()" class="link forget-link">忘记密码？</a>
      </div>
    </form>
  </div>

  <!--注册-->
  <div class="login-card" *ngIf="pageFunc == 'register'">
    <div class="login-header">
      <h1 class="main-title">线性代数基础</h1>
      <p class="sub-title">让线性代数不再晦涩 · 从基础到应用</p>
    </div>
    <form [formGroup]="registerForm" (ngSubmit)="onRegister()" class="login-form">
      <!-- 用户名输入框 -->
      <div class="form-item">
        <label for="registerUserName" class="form-label">用户名</label>
        <div class="input-wrapper">
          <i class="anticon anticon-user"></i>
          <input
            type="text"
            id="registerUserName"
            formControlName="userName"
            class="form-input"
            placeholder="请输入用户名"
            [class.error]="userNameControl?.invalid && (userNameControl?.dirty || userNameControl?.touched)"
          />
        </div>
        <div class="error-message" *ngIf="userNameControl?.invalid && (userNameControl?.dirty || userNameControl?.touched)">
          <span *ngIf="userNameControl?.errors?.['required']">用户名不能为空</span>
          <span *ngIf="userNameControl?.errors?.['pattern']">用户名格式不合法（4-20位字母、数字、下划线）</span>
        </div>
      </div>

      <!-- 邮箱输入框 -->
      <div class="form-item">
        <label for="registerUserEmail" class="form-label">邮箱</label>
        <div class="input-wrapper">
          <i class="anticon anticon-lock"></i>
          <input
            type="text"
            id="registerUserEmail"
            formControlName="userEmail"
            class="form-input"
            placeholder="请输入邮箱"
            [class.error]="userEmailControl?.invalid && (userEmailControl?.dirty || userEmailControl?.touched)"
          />
        </div>
        <!-- 错误提示 -->
        <div class="error-message" *ngIf="userEmailControl?.invalid && (userEmailControl?.dirty || userEmailControl?.touched)">
          <span *ngIf="userEmailControl?.errors?.['required']">邮箱不能为空</span>
          <span *ngIf="userEmailControl?.errors?.['pattern']">邮箱格式不合法（如 xxx@xxx.com）</span>
        </div>
      </div>

      <div class="form-item">
        <label for="registerPassword" class="form-label">密码</label>
        <div class="input-wrapper">
          <i class="anticon anticon-lock"></i>
          <input
            type="{{ showPassword ? 'text' : 'password' }}"
            id="registerPassword"
            formControlName="password"
            class="form-input"
            placeholder="请输入密码"
            [class.error]="registerForm.get('password')?.invalid && (registerForm.get('password')?.dirty || registerForm.get('password')?.touched)"
          />
          <i
            class="anticon toggle-password {{ showResetPasswordConfirmation ? 'anticon-eye' : 'anticon-eye-invisible' }}"
            (click)="showPassword = !showPassword"
          ></i>
        </div>
        <!-- 错误提示 -->
        <div *ngIf="registerForm.get('password')?.invalid && (registerForm.get('password')?.dirty || registerForm.get('password')?.touched)" class="error-message">
          密码不能为空
        </div>
      </div>

      <div class="form-item">
        <label for="registerPasswordConfirmation" class="form-label">确认密码</label>
        <div class="input-wrapper">
          <i class="anticon anticon-lock"></i>
          <input
            type="{{ showPassword ? 'text' : 'password' }}"
            id="registerPasswordConfirmation"
            formControlName="passConfirmation"
            class="form-input"
            placeholder="请确认密码"
            [class.error]="passConfirmationControl?.invalid && (passConfirmationControl?.dirty || passConfirmationControl?.touched)"
          />
          <i
            class="anticon toggle-password {{ showResetPasswordConfirmation ? 'anticon-eye' : 'anticon-eye-invisible' }}"
            (click)="showPassConfirmation = !showPassConfirmation"
          ></i>
        </div>
        <!-- 错误提示 -->
        <div class="error-message" *ngIf="passConfirmationControl?.invalid && (passConfirmationControl?.touched || passConfirmationControl?.dirty)">
          <span *ngIf="passConfirmationControl?.errors?.['required']">确认密码不能为空</span>
          <span *ngIf="passConfirmationControl?.errors?.['passwordMismatch']">两次密码输入不一致</span>
        </div>
      </div>

      <button
        type="submit"
        class="login-btn"
        [disabled]="registerForm.invalid || isRegister"
      >
        <span *ngIf="!isRegister">注册</span>
        <i *ngIf="isRegister" class="anticon anticon-loading loading-icon"></i>
      </button>

      <div class="form-footer">
        <a (click)="onLoginSwitchClick()" class="link register-link">已有账号？立即登陆</a>
        <a (click)="onForgotPasswordClick()" class="link forget-link">忘记密码？</a>
      </div>
    </form>
  </div>

  <!--修改密码-->
  <div class="login-card" *ngIf="pageFunc == 'resetPassword'">
    <div class="login-header">
      <h1 class="main-title">线性代数基础</h1>
      <p class="sub-title">让线性代数不再晦涩 · 从基础到应用</p>
    </div>
    <form [formGroup]="resetPasswordForm" (ngSubmit)="onReset()" class="login-form">
      <!-- 邮箱输入框 -->
      <div class="form-item">
        <label for="resetUserEmail" class="form-label">邮箱</label>
        <div class="input-wrapper">
          <i class="anticon anticon-lock"></i>
          <input
            type="text"
            id="resetUserEmail"
            formControlName="userEmail"
            class="form-input"
            placeholder="请输入邮箱"
            [class.error]="resetUserEmailControl?.invalid && (resetUserEmailControl?.dirty || resetUserEmailControl?.touched)"
          />
        </div>
        <!-- 错误提示 -->
        <div class="error-message" *ngIf="resetUserEmailControl?.invalid && (resetUserEmailControl?.dirty || resetUserEmailControl?.touched)">
          <span *ngIf="resetUserEmailControl?.errors?.['required']">邮箱不能为空</span>
          <span *ngIf="resetUserEmailControl?.errors?.['pattern']">邮箱格式不合法（如 xxx@xxx.com）</span>
        </div>
      </div>

      <div class="form-item">
        <label for="resetPassword" class="form-label">密码</label>
        <div class="input-wrapper">
          <i class="anticon anticon-lock"></i>
          <input
            type="{{ showPassword ? 'text' : 'password' }}"
            id="resetPassword"
            formControlName="password"
            class="form-input"
            placeholder="请输入密码"
            [class.error]="resetPasswordForm.get('password')?.invalid && (resetPasswordForm.get('password')?.dirty || resetPasswordForm.get('password')?.touched)"
          />
          <i
            class="anticon toggle-password {{ showResetPasswordConfirmation ? 'anticon-eye' : 'anticon-eye-invisible' }}"
            (click)="showResetPassword = !showResetPassword"
          ></i>
        </div>
        <!-- 错误提示 -->
        <div *ngIf="resetPasswordForm.get('password')?.invalid && (resetPasswordForm.get('password')?.dirty || resetPasswordForm.get('password')?.touched)" class="error-message">
          密码不能为空
        </div>
      </div>

      <div class="form-item">
        <label for="resetPasswordConfirmation" class="form-label">确认密码</label>
        <div class="input-wrapper">
          <i class="anticon anticon-lock"></i>
          <input
            type="{{ showPassword ? 'text' : 'password' }}"
            id="resetPasswordConfirmation"
            formControlName="passwordConfirmation"
            class="form-input"
            placeholder="请确认密码"
            [class.error]="resetPassConfirmationControl?.invalid && (resetPassConfirmationControl?.dirty || resetPassConfirmationControl?.touched)"
          />
          <i
            class="anticon toggle-password {{ showResetPasswordConfirmation ? 'anticon-eye' : 'anticon-eye-invisible' }}"
            (click)="showResetPasswordConfirmation = !showResetPasswordConfirmation"
          ></i>
        </div>
        <!-- 错误提示 -->
        <div class="error-message" *ngIf="resetPassConfirmationControl?.invalid && (resetPassConfirmationControl?.touched || resetPassConfirmationControl?.dirty)">
          <span *ngIf="resetPassConfirmationControl?.errors?.['required']">确认密码不能为空</span>
          <span *ngIf="resetPassConfirmationControl?.errors?.['passwordMismatch']">两次密码输入不一致</span>
        </div>
      </div>

      <button
        type="submit"
        class="login-btn"
        [disabled]="resetPasswordForm.invalid || isResetPassword"
      >
        <span *ngIf="!isResetPassword">重置</span>
        <i *ngIf="isResetPassword" class="anticon anticon-loading loading-icon"></i>
      </button>

      <div class="form-footer">
        <a (click)="onLoginSwitchClick()" class="link register-link">想起来了？立即登陆</a>
        <a (click)="onRegisterSwitchClick()" class="link forget-link">没有账号？立即注册</a>
      </div>
    </form>
  </div>

  <footer class="algebra-footer">
    <p>© 2025 线性代数学习平台 | 让数学变得简单</p>
  </footer>
</div>
